<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.drag{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<body>
		<div class="main_container">
			<div class="drag" id="dragElement" draggable="true">
				可以拖动的元素
			</div>
		</div>
		
		<script>
			var dragElement = document.getElementById("dragElement");
			
			dragElement.addEventListener("dragstart", function(event) {
			  // 在拖动开始时执行的操作
			  event.dataTransfer.setData("text/plain", event.target.id);
			  event.dataTransfer.effectAllowed = "move";
			  
			  // 可选的：修改拖动元素的样式
			  event.target.style.opacity = "0.5";
			});
		</script>
	</body>
</html>